<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';

import { Badge, Calendar, Spin, Tag } from 'ant-design-vue';

import type { PhotographerApi } from '#/api/wedding/photographer/index';
import { getPhotographyOrders } from '#/api/wedding/photographer/index';

const props = defineProps<{
  photographerCode: string;
}>();

const loading = ref(false);
const scheduleData = ref<Map<string, PhotographerApi.PhotographyOrder[]>>(new Map());
const selectedDate = ref<Dayjs>(dayjs());

const loadSchedule = async () => {
  loading.value = true;
  try {
    const orders = await getPhotographyOrders(props.photographerCode);
    
    // 按日期分组
    const dataMap = new Map<string, PhotographerApi.PhotographyOrder[]>();
    orders.forEach(order => {
      const dateKey = dayjs(order.shootingTime).format('YYYY-MM-DD');
      if (!dataMap.has(dateKey)) {
        dataMap.set(dateKey, []);
      }
      dataMap.get(dateKey)!.push(order);
    });
    
    scheduleData.value = dataMap;
  } finally {
    loading.value = false;
  }
};

const getDateOrders = (value: Dayjs) => {
  const dateKey = value.format('YYYY-MM-DD');
  return scheduleData.value.get(dateKey) || [];
};

const onSelect = (value: Dayjs) => {
  selectedDate.value = value;
};

onMounted(() => {
  loadSchedule();
});
</script>

<template>
  <Spin :spinning="loading">
    <div>
      <div class="mb-4 p-4 bg-gray-50 rounded">
      <div class="text-sm font-medium mb-2">档期说明</div>
      <div class="flex items-center space-x-4 text-xs">
        <div class="flex items-center">
          <Badge status="processing" />
          <span class="ml-1">进行中/已预约</span>
        </div>
        <div class="flex items-center">
          <Badge status="success" />
          <span class="ml-1">已完成</span>
        </div>
      </div>
    </div>

    <Calendar 
      :fullscreen="true"
      @select="onSelect"
    >
      <template #dateCellRender="{ current }">
        <div class="calendar-cell">
          <Badge 
            v-for="(order, index) in getDateOrders(current)"
            :key="index"
            :status="order.status === '已完成' ? 'success' : 'processing'"
          >
            <template #text>
              <span class="text-xs">
                {{ dayjs(order.shootingTime).format('HH:mm') }} - {{ order.customerName }}
              </span>
            </template>
          </Badge>
        </div>
      </template>
    </Calendar>

    <div class="mt-4" v-if="scheduleData.get(selectedDate.format('YYYY-MM-DD'))">
      <div class="text-sm font-medium mb-2">
        {{ selectedDate.format('YYYY年MM月DD日') }} 的拍摄安排
      </div>
      <div 
        v-for="(order, index) in scheduleData.get(selectedDate.format('YYYY-MM-DD'))" 
        :key="index"
        class="p-3 mb-2 border rounded hover:bg-gray-50"
      >
        <div class="flex justify-between items-center">
          <div>
            <div class="font-medium">{{ order.customerName }}</div>
            <div class="text-xs text-gray-500">
              {{ dayjs(order.shootingTime).format('HH:mm') }} | {{ order.shootingLocation }}
            </div>
            <div class="text-xs text-gray-500 mt-1">
              拍摄{{ order.photoCount }}张 / 精修{{ order.retouchCount }}张
            </div>
          </div>
          <div>
            <Tag>{{ order.status }}</Tag>
          </div>
        </div>
      </div>
    </div>
    </div>
  </Spin>
</template>

<style scoped>
.calendar-cell {
  overflow: hidden;
}
:deep(.ant-badge-status-text) {
  font-size: 12px;
}
</style>

